<template>
  <!-- 放入头部组件 -->
<navbar title="最新政策"></navbar>
  <!-- 主体内容 -->
  <view class="contain">
    <view class="title">{{ data.title }}</view>
    <!--    <view class="positionAndTime">
      <view class="position">{{ data.author }}</view>
      <view class="time">{{ data.expirationTime }}</view>
    </view> -->
    <view class="infromation" v-html="data.content"></view>
  </view>
  <!-- 底部内容 -->
  <!-- <view class="bottom">
    <view class="bottom-contain">
      <view class="btmicon">
        <text class="talent">人才</text>
      </view>
      <view class="title">{{ btmtitle }}</view>
      <view class="like">
        <text class="likeTitle" @click="like">+订阅</text>
      </view>
    </view>
  </view> -->
</template>

<script setup>
  import navbar from '@/components/navbar/navbar.vue'
  import {
    ref,
    reactive
  } from "vue"
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import {
    newPolicy
  } from '@/api/person.js'
  const data = ref({
    title: '',
    content: ''
  });
  onLoad((params) => {
    newPolicy(params).then(res => {
      console.log(res)
      if (res.code === 200) {
        data.value = res.data[0]
      }
    })
  })
  const like = () => {
    console.log("ok")
  }
  const btmtitle = ref('人才落户政策')
</script>

<style lang="scss" scoped>
  .header {
    color: #fff;
    font-size: 36rpx;
  }

  :deep(.right-content) {
    margin-right: 75rpx;
  }

  .contain {
    margin-top: 30rpx;
    display: inline-block;
    padding: 64rpx 30rpx 98rpx 30rpx;
    justify-content: space-between;
    font-family: Source Han Sans CN;
    font-weight: normal;
    font-stretch: normal;

    .title {
      font-size: 42rpx;
      line-height: 60rpx;
      letter-spacing: -1rpx;
      color: #333333;
    }

    .positionAndTime {
      margin-top: 46rpx;

      .position {
        display: inline-block;
        font-size: 28rpx;
        line-height: 46rpx;
        letter-spacing: 0rpx;
        color: #333333;
      }

      .time {
        display: inline-block;
        padding-left: 16rpx;
        font-size: 28rpx;
        line-height: 46rpx;
        letter-spacing: 0rpx;
        color: #9ca3af;
      }
    }

    .infromation {
      margin-top: 30px;
      border-top: 2px solid #f5f5f5;
      padding-top: 30px;
    }

    image {
      width: 690rpx;
      height: 460rpx;
      background-image: linear-gradient(90deg);
      border-radius: 16rpx;
    }
  }

  .bottom {
    position: fixed;
    bottom: 0;
    width: 750rpx;
    height: 98rpx;
    background-color: #ffffff;
    box-shadow: 0rpx -2rpx 8rpx 0rpx rgba(189, 189, 189, 0.24);
    font-family: Source Han Sans CN;

    .bottom-contain {
      display: flex;
      align-items: center;
      margin: 17rpx 30rpx 0 30rpx;
      font-weight: normal;
      font-stretch: norm al;

      .btmicon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 64rpx;
        height: 64rpx;
        background-color: #e1383c;
        border-radius: 25%;

        .talent {
          font-size: 24rpx;
          line-height: 46rpx;
          letter-spacing: 0rpx;
          color: #ffffff;
        }
      }

      .title {
        margin-left: 16rpx;
        font-size: 28rpx;
        font-weight: 700;
        line-height: 46rpx;
        letter-spacing: 0rpx;
        color: #333333;
      }

      .like {
        margin-left: auto;
        background-color: rgba(225, 56, 60, 0.06);
        border-radius: 16rpx;
        border: solid 2rpx rgba(225, 56, 60, 0.16);
        display: flex;
        align-items: center;
        justify-content: center;

        .likeTitle {
          padding: 15rpx 24rpx 15rpx 24rpx;
          font-size: 24rpx;
          letter-spacing: 0rpx;
          color: #e1383c;
        }
      }
    }
  }
</style>